<template>
	<view class="select-supervisor">
		<navBar title="病害選擇" @goBack="uni.navigateBack()"></navBar>
		<view style="height: 30rpx;background-color:#f5f7fa ;"></view>
		<view class="search">
			<u-search @search="confirmSearch" @change="confirmSearch" v-model="searchForm.keyWord"
				placeholder="請輸入病害編號" :showAction="false" :clearabled="false" height="88upx" />
		</view>
		<scroll-view  scroll-y
			:style="{height: 'calc(100vh - '+ containerOutsideHeight + 'px)'}">
			<view>
				<u-checkbox-group v-model="selectedDisease" @change="checkboxChange" placement="column">
					<view class="form" style="padding: 20rpx 0;" v-for="(item,index) in filteredData" :key="index">
						<view style="height: 30rpx;background-color:#f5f7fa ;" v-if="index != 0"></view>
						<view style="font-weight: 600;font-size: 36rpx;color: #445469;margin: 16rpx 30rpx;">{{ item.orderNo }}</view>
						<view class="form-item none">
							<view class="label">病害位置:{{ item.location }}</view>
							<u-checkbox  v-if="!(item.child && item.child.length)" shape="circle" :name="item.id"  activeBackgroundColor="#2979ff" class="checkbox"></u-checkbox>
						</view>
						<view class="form-item none">
							<view class="label">歷程:{{ item.subLocation }}<view class="icon">{{ item.priority }}</view></view>
						</view>
						<view class="form-item none">
							<view class="label">
								<view class="form-text">病害描述:{{ item.defectDescription }}</view>
							</view>
						</view>
						<view class="form-item none" style="padding-bottom: 20rpx;">
							<view class="label">病害編號:{{ item.defectNo }}</view>
						</view>
						<view v-if="item.child && item.child.length">
							<view class="form-item dash" v-for="(item2, index2) in item.child" :key="index2">
								<view class="label">{{ item2.defectNo }}-{{item2.state }}</view>
								<view class="form-content">
										<u-checkbox   shape="circle" :name="item2.id"  activeBackgroundColor="#2979ff" class="checkbox"></u-checkbox>
								</view>
							</view>
						</view>
					</view>
				</u-checkbox-group>
			</view>
		</scroll-view>
		<view class="footer-button">
			<view class="button-placeholder"></view>
			<view class="button-group">
				<view @click="clickConfirmBtn" :loading="isLoading" class="button-primary">確定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	import { getSystemHeightInfo } from "@/utils/common.js";
	import { hkOrder_get } from "@/api/HongKong/hkAttendanceSheet.js";
	export default {
		name: "select-diseases",
		data() {
			return {
				// 容器之外的高度
				containerOutsideHeight: 0,
				// 监管人员列表
				supervisorArray: [],
				// 搜索表单
				searchForm: {
					keyWord: "",
				},
				// 是否正在加载中
				isLoading: false,
				list: [],
				selectedDisease:[],
			}
		},
		computed: {
			...mapGetters(['dictMap']),
			filteredData() {
				return this.list.filter((p)=>{
					return p.defectNo && p.defectNo.indexOf(this.searchForm.keyWord) !==-1
				})
				// return this.list
			}
		},
		async onLoad(options) {
			if(options && options.id) {
				this.hkOrderId = options.id
				this.copyList = await this.getHkOrderItem()
				this.list =  this.listToTree(this.copyList) 
				console.log(this.list, '结果')
			}
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('sendRepairDisease', (item) => {
				console.error(item.data, '数据')
				// this.selectedDisease = item.data.map(it => it.id)
				this.selectedDisease = item.data
			})
			this.eventChannel = eventChannel
			this.initContainerData();
		},
		methods: {
			listToTree(data) {
			    // 先生成parent建立父子关系
			    const obj = {};
			    data.forEach(item => {
			        obj[item.id] = item;
			    });
			    const parentList = [];
			    data.forEach(item => {
			        const parent = obj[item.parentId];
			        if (parent) {
			            // 当前项有父节点
			            parent.child = parent.child || [];
			            // 将父级的信息也包含在子级中
			            item.location = parent.location
						item.subLocation = parent.subLocation
						item.defectDescription = parent.defectDescription
						item.priority = parent.priority
						item.parentDefectNo = parent.defectNo
			            parent.child.push(item);
			        } else {
			            // 当前项没有父节点 -> 顶层
			            parentList.push(item);
			        }
			    });
			    return parentList;
			},

			checkboxChange(e){
				this.selectedDisease = e
			},
			/** 初始化容器数据 */
			initContainerData() {
				const { stateHeight, bottomHeight, navbarHeight } = getSystemHeightInfo();
				this.containerOutsideHeight = stateHeight + bottomHeight + navbarHeight + 180;
			},

			getHkOrderItem() {
				return new Promise(resolve => {
					const resq = {
							projectId:uni.getStorageSync('isOwner'),
							id: this.hkOrderId, 
							diseaseState: 1, //状态：1 维修 0 不维修【】
							diseaseRepairStates: ["dwx", "wxz"] //病害维修状态(维修中：wxz、已维修：ywx)
						}
					hkOrder_get(resq).then(res => {
						if(res.success) {
							resolve(res.result.diseaseOrders)
						}else {
							resolve([])
						}
					})
				})

			},
			/** 点击确认按钮 */
			clickConfirmBtn() {
				// console.log(this.childDisease,this.selectedDisease, '---')
				let idsList = [...this.selectedDisease]
				// const parentIds = this.copyList.filter(i => i.parentId)
				// console.log(idsList, '000')
				for(let it of this.list) {
					it.isChecked = false
					for(let v of idsList) {
						if(v == it.id) {
							it.isChecked = true
						}
					}
					if(it.child && it.child.length && idsList.length) {
						for(let it2 of it.child) {
							it2.isChecked = false
							for(let k of idsList) {
								if(k == it2.id) {
									it2.isChecked = true
									it.isChecked = true
								}
								
							}
							// for(let it3 of this.copyList) {
							// 	if(it3.id === it2.id) {
							// 		it3.location = it2.location
							// 		it3.subLocation = it2.subLocation
							// 		it3.priority = it2.priority
							// 		it3.defectDescription = it2.defectDescription
							// 	}
							// } 
						}
					}
				}
				// console.error(this.copyList, '1')
				console.log(this.list, '2')
				// return
				uni.navigateBack({
					success: () => {
						this.eventChannel.emit("getRepairDiseaseInfo", {
							// data: this.copyList.filter(it => idsList.includes(it.id)) || []
							data: this.list,
							idsList: idsList
						})
					}
				});
			},

			/** 确认搜索 */
			confirmSearch() {},
		}
	}
</script>

<style scoped lang="scss">
	.select-supervisor {
		font-size: 32upx;
		/* #ifdef MP-WEIXIN */
		padding-top: 200rpx;

		/* #endif */
		.search {
			padding: 42upx 36upx 14upx 28upx;
			position: sticky;
			top: 0px;
			border-top: 1px solid #fff;
			background: #fff;
			z-index: 1;
		}

		.form {
			background: #fff;
			// padding-top: 26upx;

			.form-item {
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 30upx;
				border-bottom: 1px solid #e2e5ed;

				&:last-of-type {
					border-bottom: none;
				}

				.label {
					color: #445469;
					line-height: 34upx;
					flex-shrink: 0;
					display: flex;
					align-items: center;

					.icon {
						width: 50rpx;
						padding: 6rpx 20rpx;
						clip-path: polygon(15rpx 0, 100% 0, calc(100% - 15rpx) 52rpx, 0% 52rpx);
						height: 24rpx;
						font-size: 26rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 24rpx;
						background: linear-gradient(90deg, #ff5f2c 0%, #ff9e39 100%);
						text-align: center;
						opacity: 1;
					}
				}

				.form-content {
					color: #22204e;
					display: flex;
					align-items: center;
				}

				.form-text {
					line-height: 58upx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					max-width: 700upx;
				}

				.form-text.none {
					opacity: .7;
					font-size: 30rpx;
				}

				.u-icon {
					margin-left: 40upx;
				}

				.uicon-close-circle-fill {
					margin-left: 32upx;
				}

				.u-input {
					width: 340upx;
					text-align: right;

					::v-deep .u-input__content__field-wrapper {
						margin-right: 24upx;
					}

					::v-deep .uni-input-wrapper {
						text-align: right;
					}
				}

				.u-switch {
					margin-right: 30upx;
				}
			}

			.form-item.none {
				border-bottom: none;
				height: 60upx;
			}

			.form-item.dash {
				border-top: 1px dashed #E0E7F6;
				border-bottom: 1px dashed #E0E7F6;

				&:last-of-type {
					border-bottom: none;
				}
			}


			.no-inline {
				display: block;
				height: auto;

				.label {
					line-height: 100upx;
				}
			}
		}
	}
	.special-work-personnel-list {
		padding: 0 36upx 0 28upx;
		color: #445469;
		font-weight: 500;
	
		.list-item {
			/* #ifdef APP-PLUS || H5 */
			padding: 40upx 18upx 34upx 28upx;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			padding: 42upx 36upx 14upx 28upx;
			/* #endif */
			border-bottom: 1px solid #e2e5ed;
			display: flex;
			align-items: center;
			justify-content: space-between;
	
			.wid-320 {
				/* #ifdef APP-PLUS || H5 */
				width: calc(100% - 44upx);
				/* #endif */
	
				/* #ifdef MP-WEIXIN */
				width: 640rpx;
				/* #endif */
			}
		}
	
		::v-deep .u-radio-group {
			flex: initial;
	
			.u-radio__icon-wrap {
				margin-right: 0;
			}
		}
	}
</style>